Être capable de déboguer votre application électron est essentiel pour créer des applications fiables et après avoir couvert
la structure initiale de l'application, vous avez probablement déjà compris comment le processus de rendu
sera débogué et inspecté.
Cette ligne ici, la fenêtre principale étant la fenêtre principale de l'application, nous créons du contenu Web, ouvrons des outils
de développement.
Cette méthode ouvre essentiellement les outils de développement de chrome pour la fenêtre.
Il est appelé dès sa création, ce qui donne ici cette fenêtre, une version complètement standard des outils de développement
de chrome, exactement la même que celle que vous connaissez dans votre navigateur de bureau, nous permettant
de déboguer tout code exécuté à l'intérieur du Web contenu de cette fenêtre.
Donc, l'accès HTML JavaScript chargé, c'est assez simple alors.
Mais voyons maintenant comment nous pouvons déboguer le processus principal à la place.
Tout ici dans ce script principal et ses dépendances, ou en d'autres termes, le processus de notification.
Il existe maintenant un certain nombre de façons d'inspecter ce processus, notamment en utilisant du code Visual Studio
ou un IDY similaire et un lien vers la documentation pertinente expliquant cela dans les ressources de la leçon pour nos besoins.
Cependant, je vais à nouveau utiliser les outils de développement de chrome chrome, fournir un excellent débogage JavaScript, donc c'est un
ajustement parfait pour cela.
La première étape consiste à configurer Chrome pour qu'il écoute sur le port, le débogage.
Le nœud d'application crée essentiellement une connexion websocket sur un port HTTP local pour le débogage.
Donc, pour démarrer l'application avec le débogage activé, nous pouvons exécuter electron avec un indicateur d'inspection égal au port.
Nous voulons utiliser tout ce que le port 1023 devrait faire.
Je vais faire en sorte que ce port cinq huit cinq huit s'exécute dans le répertoire actuel, comme notre centre de commande
NPM Start et l'application se lance normalement.
Mais en arrière-plan, nous avons maintenant le débogueur de nœuds.
L'écoute sur le port cinq huit cinq huit, comme mentionné, utilisera l'inspecteur de chrome.
Donc, dans une nouvelle fenêtre chrome, accédez à chrome deux-points slash, slash, inspecter.
Ce qui nous amène à ce menu des périphériques des outils de développement.
Gardez à l'esprit que cette page peut avoir un aspect différent sur les nouvelles versions de Chrome.
Cliquez sur Configurer et ajoutez cette nouvelle session de débogage en tant qu'hôte local cible cinq huit cinq huit.
Fait et immédiatement notre carte électorale apparaît sous les appareils où nous pouvons maintenant inspecter le processus principal
pour cette cible en cliquant sur ce lien d'inspecter, en lançant une nouvelle fenêtre de
bilan pour notre processus d'évaluation, cliquez sur l'onglet sources, leurs principaux dossiers étant répertoriés comme une ressource.
OK, donc avec l'inspecteur Chrom configuré, voyons comment déclencher des points d'arrêt et déboguer notre code.
Fermez-le à MINDGAMES et pour démontrer, j'ajouterai un simple point d'arrêt dans cet événement principal fermé de Windows, ce
qui signifie que le rappel qui s'exécute lorsque nous fermons notre seul et unique débogueur de fenêtre en haut étant la
sauvegarde standard du déclencheur de point d'arrêt.
Redémarrez l'application avec l'inspecteur maintenant de retour dans la fenêtre chrome, nous devons relancer l'inspecteur pour
cette cible.
Là, nous voyons la déclaration des débogueurs.
Alors allez-y et fermez cette fenêtre.
Et le point d'arrêt est déclenché, empêchant la fenêtre de se fermer et sautant directement
à ce point de l'année d'exécution du code de reprise du code et la fenêtre continue de se fermer.
C'est donc aussi simple que cela pour déclencher des points d'arrêt dans le processus principal.
Mais comme nous devons relancer cette fenêtre d'inspection pour chaque nouvelle section de l'application, nous pouvons parfois avoir
besoin d'exécuter un point d'arrêt immédiat.
Dès que l'application est démarrée, ce qui nous permet de parcourir chaque partie de l'application, de démarrer ou
de supprimer ce point d'arrêt vers le terminal.
Et maintenant, pour interrompre le lancement, nous pouvons exécuter au lieu d'un simple drapeau d'inspection, inspecter Beeac ou entrer par effraction dans
le même port.
Cette fois, rien ne se passe car le processus principal est arrêté avant de pouvoir créer ma nouvelle
fenêtre, basculer vers Chrome et relancer l'inspecteur.
Nous voyons l'application être arrêtée sur la toute première ligne du script, les utilisateurs
électroniques pour démarrer le processus principal où nous pouvons maintenant entrer et sortir du code dès le début.
Très utile, en particulier pour les fonctions de débogage dans le processus principal qui se produisent au lancement.
Par exemple, il s'agit d'un hachage crêpé qui est déconnecté.
Si nous ne nous arrêtons pas avant cette exécution, nous n'ouvrirons jamais une fenêtre d'inspecteur assez rapidement pour la
voir.
Donc, ajoutez plutôt le point d'arrêt souhaité juste avant cette interruption du message de journal au démarrage, comme avant que nous n'obtenions aucune fenêtre,
bien sûr, car tout est arrêté, relancez l'inspecteur, mais cette fois avec l'inspecteur prêt et le point
d'arrêt dit simplement autoriser l'application à continuez l'exécution et l'application s'arrête là où nous avons spécifié dans ce
rappel de déchiffrement où nous pouvons inspecter la valeur de ce hachage en temps réel.
Donc, comme vous pouvez le voir, une fois le débogage configuré, le processus principal est assez simple.
Si vous souhaitez en savoir plus sur le débogage avec les outils de développement Chrome, j'ai lié à certaines ressources.
Dans la prochaine leçon, nous verrons comment réinitialiser notre projet avant de se lancer avec l'API electron.